<template>
  <div>
    <n-space vertical size="large">
      <n-layout>
        <!-- <n-layout-header>
        <n-card  :bordered="false" size="small" class="proCard p-0">
          <n-thing
            class="thing-cell"
            v-for="item in typeTabList"
            :key="item.key"
            :class="{ 'thing-cell-on': type === item.key }"
            @click="switchType(item)"
          > 
            <n-button>{{ item.name }}</n-button>
          </n-thing>
        </n-card>
      </n-layout-header>
      <n-layout-content content-style="padding: 0;">
        <n-card :bordered="false" size="small" class="proCard">
          <Chapter v-if="type === 1" >这是1</Chapter>
          <Discuss v-if="type === 2" >这是2</Discuss>
          <div v-if="type === 3" >这是3</div>
        </n-card>
      </n-layout-content> -->
        <n-card title="" style="margin-bottom: 16px">
          
        </n-card>
      </n-layout>
    </n-space>
  </div>
</template>
<script lang="ts" setup>
// import { ref } from 'vue';


// const typeTabList = [
//   {
//     name: '章节',
//     key: 1,
//   },
//   {
//     name: '讨论',
//     key: 2,
//   },
//   {
//     name: '测验',
//     key: 3,
//   },
// ];


// const type = ref(1);
// const typeTitle = ref('基本设置');

// function switchType(e) {
//   type.value = e.key;
//   typeTitle.value = e.name;
// }
</script>
<style lang="less" scoped>
.thing-cell {
  float: left;
  margin: 0 10px;

  &:hover {
    background: #f3f3f3;
    cursor: pointer;
  }
}

.thing-cell-on {
  background: #f0faff;
  color: #2d8cf0;

  ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
    color: #2d8cf0;
  }

  &:hover {
    background: #f0faff;
  }
}
</style>
